/* global */

* {
    margin: 0;
    padding: 0;
}

.container {
    padding: 300px;
    background: black;
    color: white;
    height: 500px;
}

.wrap {
    width: 300px;
    height: 300px;
    perspective: 1000px;
    position: relative;
}

.wrap__a1 .cube {
    animation: spin1 30s linear infinite;
}

.wrap__a1 .cube__face {
    opacity: 0.9;
    backface-visibility: hidden;
}

.wrap__a2 .cube {
    animation: spin2 10s linear infinite;
}


/* --- object --- */

.cube {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: all .5s ease;
}

.cube__inner {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
}

.cube__face {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    opacity: 0.3;
    border: 1px solid #ccc;
}

.cube__img {
    width: 100%;
    height: 100%;
}

.cube__face--front {
    transform: translateZ(150px);
}

.cube__face--back {
    transform: rotateX(180deg) translateZ(150px);
}

.cube__face--left {
    transform: rotateY(-90deg) translateZ(150px);
}

.cube__face--right {
    transform: rotateY(90deg) translateZ(150px);
}

.cube__face--top {
    transform: rotateX(90deg) translateZ(150px);
}

.cube__face--bottom {
    transform: rotateX(-90deg) translateZ(150px);
}


/* --- animation --- */

@keyframes spin1 {
    from {
        transform: scale(0.3, 0.3) rotateX(45deg) rotateY(45deg);
    }
    to {
        transform: scale(0.3, 0.3) rotateX(405deg) rotateY(765deg);
    }
}

@keyframes spin2 {
    from {
        transform: rotateX(45deg) rotateY(45deg);
    }
    to {
        transform: rotateX(405deg) rotateY(765deg);
    }
}